<script setup lang="ts">
defineOptions({
  name: "fabDetail"
});

import { ref, markRaw, provide } from "vue";
import { useRouterStoreHook } from "@/store/modules/router";
import { useRoute } from "vue-router";
import baseInfo from "./components/baseInfo/index.vue";
import provision from "./components/provision/index.vue";
import switchTableTabs from "../../components/switchTableTabs/index.vue";
import { type OptionsType } from "@/components/ReSegmented";

const route = useRoute();
const routerStore = useRouterStoreHook();
const activeTab = ref<number>(0);
const defaultparameter = ref<Record<string, any>>({});
const options: Array<OptionsType> = [
  {
    label: "基本信息",
    com: markRaw(baseInfo)
  },
  {
    label: "供应与使用",
    com: markRaw(provision),
    props: {
      defaultparameter: defaultparameter.value
    }
  }
];

const routerQuery = ref<Record<string, any>>(null);
provide("routerQuery", routerQuery);

const init = async () => {
  const {
    query: { params = "" }
  } = route;
  const query = JSON.parse(decodeURI(params as string));
  routerQuery.value = query;
  if (query) {
    const { eqpId = "", tab = "0", parameter = "", name = "", className = "" } = query;
    if (!eqpId) return null;
    routerStore.SET_SUBJECT_(className as string);
    defaultparameter.value = { parameter, name };
    document.title = eqpId as string;
    activeTab.value = Number(tab);
  }
};

init();
</script>

<template>
  <div class="fab-base-info">
    <switchTableTabs v-model="activeTab" :options="options" type="self-adapt" />
  </div>
</template>

<style lang="scss" scoped>
.fab-base-info {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #efefef;
}
</style>
